<template>
    <div class="mobile13-box">

        <my-header :title="title"></my-header>

        <div class="header">
            <img src="https://img5.jianke.com/mall/vmall/index/201905/342354bd33f94b8facc92d2284173fd7.jpg?imageMogr2/format/jp2" alt="">
        </div>

        <div class="content1-list" v-for="value in moblie5List" :key="value.productCode">
            <div class="list">
                <div class="list-left">
                    <img :src="value.productImageUrl" alt="">
                </div>
                <div class="list-right">
                    <p class="list-text">{{ value.productName }}</p>
                    <p class="list-text1">{{ value.introduction }}</p>
                    <p class="list-price">
                        <span class="price-left">
                            <em>￥</em>
                            {{ value.productPrice/100 + '.00' }}
                        </span>
                        <span class="price-right">立即购买</span>
                    </p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>


// import imgUrl1 from '../../../assets/image/mobile5/mobile5-1.jpg'
import myHeader from 'Components/common/myHeader'

import {mapActions, mapGetters} from 'vuex'
export default {
    components: {
        myHeader
    },
    data () {
        return {
            moblie5List: [],
            title: '病例介绍',
        }
    },
    methods: {
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('854034,858586,858584,861065,861073,849544,849545,852001,854039,856241');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];

        // 改变背景颜色
        document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        document.querySelector('.van-icon').style.color = '#ffffffcc';
        document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        document.querySelector('.van-hairline--bottom').style.background = '#E33534';
        document.querySelector('.van-hairline--bottom').style.opacity = '0.9';
    }
};
</script>

<style lang="scss" scoped>
    @import 'Css/common-row.scss';
    .content1-list {
        padding: 0 !important;
        .list {
            background: #fff !important;
            .list-text1 {
                white-space: pre-wrap;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

                font-size: 12px;
                // color: #f53b10;
                // margin-bottom: 5px;
            }
        }
    }
</style>



